

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>数据表格的重载 - 数据表格</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="{{ADMIN_PATH}}layui/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="{{ADMIN_PATH}}layui/layuiadmin/style/admin.css" media="all">
</head>
<body>

<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a lay-href="">主页</a>
    <a><cite>组件</cite></a>
    <a><cite>数据表格</cite></a>
    <a><cite>数据表格的重载</cite></a>
  </div>
</div>

<div class="layui-fluid layui-form-pane" >
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header">用户中心</div>

        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
          <div class="layui-form-item">
            <div class="layui-inline">
              <div class="layui-btn-group form_quick_date">
                <a class="layui-btn layui-btn-primary" data-type="1"
                   onclick="form_do_set_day(1,null,null)">今天</a>
                <a class="layui-btn layui-btn-primary" data-type="2"
                   onclick="form_do_set_day(2,null,null)">昨天</a>
                <a class="layui-btn layui-btn-primary" data-type="3"
                   onclick="form_do_set_day(3,null,null)">本周</a>
                <a class="layui-btn layui-btn-primary" data-type="4"
                   onclick="form_do_set_day(4,null,null)">上周</a>
                <a class="layui-btn layui-btn-primary" data-type="5"
                   onclick="form_do_set_day(5,null,null)">本月</a>
                <a class="layui-btn layui-btn-primary" data-type="6"
                   onclick="form_do_set_day(6,null,null)">上月</a>
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label layui-hide-md">注册日期</label>
              <div class="layui-input-inline" style="width:100px;">
                <input type="text" class="layui-input" id="search_start_date" name="start_date"
                       autocomplete="off"
                       format="date" placeholder="注册开始日期">
              </div>
              <div class="layui-form-mid">
                -
              </div>
              <div class="layui-input-inline" style="width:100px;">
                <input type="text" class="layui-input" id="search_end_date" name="end_date"
                       autocomplete="off"
                       format="date" placeholder="注册结束日期">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">帐号</label>
              <div class="layui-input-inline">
                <input type="text" name="account" placeholder="请输入" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">用户名</label>
              <div class="layui-input-inline">
                <input type="text" name="nickname" placeholder="请输入" autocomplete="off" class="layui-input">
              </div>
            </div>

            <div class="layui-inline">
              <div class="layui-input-inline">
                <select id="auto_refresh" name="auto_refresh" lay-filter="auto_refresh">
                  <option value="">停止自动刷新</option>
                  <option value="10">每10秒刷新一次</option>
                  <option value="20">每20秒刷新一次</option>
                  <option value="30">每30秒刷新一次</option>
                </select>
              </div>
            </div>

            <div class="layui-inline">
              <button class="layui-btn layui-btn-normal" lay-submit lay-filter="LAY-app-contlist-search">
                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>搜索
              </button>
              <button class="layui-btn layuiadmin-btn-list" data-type="add">添加</button>
            </div>
          </div>
        </div>


        <div class="layui-card-body">
          <table class="layui-hide" id="test-table-reload" lay-filter="user"></table>
          <script type="text/html" id="test-table-operate-barDemo">
            <div class="layui-btn-group">
            <button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="role">角色分配</button>
            <button class="layui-btn layui-btn-xs" lay-event="edit">修改</button>
            <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</button>
            <button class="layui-btn layui-btn-xs layui-btn-warm" lay-event="opgg">重置OTP</button>
            </div>
          </script>
        </div>
      </div>

    </div>
  </div>
</div>

<script src="{{ADMIN_PATH}}layui/layuiadmin/layui/layui.js?{{time()}}"></script>
<script src="{{ADMIN_PATH}}js/admin.common.js?{{time()}}"></script>
<script>
  var index_url='{{url('admin/member/index')}}';  //列表
  var add_url='{{url('admin/member/add')}}';       //添加
  var edit_url='{{url('admin/member/edit')}}';   //编辑
  var del_url='{{url('admin/member/del')}}';      //删除
  var optgg_url='{{url('admin/member/optgg')}}';    //重置google
  var role_url='{{url('admin/member/change/role')}}';  //用户选择角色
    layui.config({
        base: '{{ADMIN_PATH}}layui/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table'], function(){
        var $ = layui.$
            ,admin = layui.admin
            ,element = layui.element
            ,form = layui.form;
        var table = layui.table;

        //=========================表单搜索搜索========================
        form.on('submit(LAY-app-contlist-search)', function(data){

            var field = data.field;
            console.log(field);
            //
            // //执行重载
            table.reload('test-table-reload', {
                where: field
            });
        });
        $('.layui-btn.layuiadmin-btn-list').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        //===================表格渲染========================
        table.render({
            elem: '#test-table-reload'
            ,url: index_url
            ,method:'post'
            ,cols: [[
                {checkbox: true, fixed: true}
                ,{field:'uid', title: 'ID', width:80, sort: true, fixed: true}
                ,{field:'account', title: '用户昵称', width:120, sort: true, fixed: true}
                ,{field:'nickname', title: '用户昵称', width:120, sort: true, fixed: true}
                ,{field:'score', title: '积分', width:120, sort: true, fixed: true}

                ,{field:'login', title: '登录次数', width:120, sort: true, fixed: true}
                ,{field:'last_login_date', title: '最后登录时间', width:120, sort: true, fixed: true}
                ,{field:'last_ip', title: '最后登录IP', width:120, sort: true, fixed: true}
                , {
                    title: '绑定OTP', field: 'otp_gg', width: 95, sort: true, fixed: true, templet: function (d) {
                        if (d.otp_gg == '' || d.otp_gg == null) {
                            return '<span style="color: red;">未绑定</span>';
                        } else {
                            return '<span style="color: green;">已绑定</span>';
                        }

                    }
                }
                , {field: 'status', title: '状态', width: 80, sort: true, fixed: 'right', templet: temp_switch_tpl}
                ,{width:220, title: '操作',align:'center', fixed: 'right', toolbar: '#test-table-operate-barDemo'}
            ]]
            //进行按钮操作
            ,page: true
            ,done: function(res, curr, count){
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                console.log(res);

                //得到当前页码
                console.log(curr);

                //得到数据总量
                console.log(count);
            }
        });
//监听工具条
        table.on('tool(user)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'role'){ //查看
                                       //提交数据
                var index = layer.open({
                    type: 2
                    , title: '分配角色:' + data.account
                    , content: role_url + "?uid=" + data.uid
                    , area: ['500px', '330px'] //宽高
                    , maxmin: true
                    , scrollbar: true
                    , end: function (index, layero) {
                        //关闭弹窗后的事件
                    }
                });

                //do somehing
            } else if(layEvent === 'del'){ //删除

                layer.confirm('确定删除吗?', function (index) {
                    //提交数据
                    //提交数据
                    var o = {uid: data.uid};
                    $.post(del_url, o, function (res) {
                        try {
                            if (res.status == 200) {
                                //重新刷新父窗口的数据区
                                table.reload('test-table-reload'); //重载表格
                            } else {
                                layer.msg(res.message);
                            }
                        } catch (e) {
                            layer.msg("异常");
                        }
                    });

                    //关闭自身提示框
                    layer.close(index);
                });

            } else if(layEvent === 'edit'){ //编辑
                layer.open({
                    type: 2,
                    title: '编辑:'+data.nickname,
                    shade: false,
                    area: ['70%', '500px'], //宽高
                    content: edit_url+'/'+data.uid,
                    zIndex: layer.zIndex //重点1
                    ,btn: ['保存', '取消']
                    ,yes: function(index, layero){
                    //点击确认触发 iframe 内容中的按钮提交
                    var submit = layero.find('iframe').contents().find("#form_save");
                    submit.click();
                   }
                    ,success: function(layero){
                        layer.setTop(layero); //重点2
                    }
                });
            }else if (obj.event === 'opgg') {

                //提交数据
                layer.confirm('确定要重置OTP绑定?', function (index) {
                    //提交数据
                    var o = {uid: data.uid};
                    $.post(optgg_url, o, function (res) {
                        try {
                            if (res.status == 200) {
                                //重新刷新父窗口的数据区
                                table.reload('test-table-reload'); //重载表格
                            } else {
                                layer.msg(res.message);
                            }
                        } catch (e) {
                            layer.msg("异常");
                        }
                    });

                    //关闭自身提示框
                    layer.close(index);
                });

                //关闭自身提示框

            }
        });
        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#test-table-reload');
                //执行重载
                table.reload('test-table-reload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        uid: demoReload.val()
                    }
                });
            },
            add: function(){
                layer.open({
                    type: 2
                    ,title: '添加用户'
                    ,content: add_url
                    ,maxmin: true
                    ,area: ['750px', '550px']
                    ,btn: ['确定', '取消']
                    ,yes: function(index, layero){
                        //点击确认触发 iframe 内容中的按钮提交
                        var submit = layero.find('iframe').contents().find("#form_save");
                        submit.click();
                    }
                });
            }
        };



    });

    function temp_switch_tpl(d){
        if(d.status==1){
            return '<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭" checked>';
        }else{
            return '<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">';
        }

    }
</script>
</body>
</html>